<template>
  <div class="mainPage">
    <div class="mainPage_top">
      <div>
         <el-button
        type="success"
        size="medium"
        style="margin-bottom: 0.1rem"
        @click="create"
        >新增展览</el-button
      >
      <el-button
        type="info"
        size="medium"
        style="margin-bottom: 0.1rem"
        :loading="loading2"
        @click="allPush"
        >批量导出二维码</el-button
      >
      </div>
     
      <!-- <el-button type="primary" @click="create">新增楼层展区</el-button> -->
      <div class="searchBox">
        <el-input
          :style="{ marginRight: '10px' }"
          clearable
          @change="nameChange"
          placeholder="请输入展览名称"
          suffix-icon="el-icon-search"
          v-model="name"
        >
        </el-input>
        <el-select
          @change="pidChange"
          v-model="pid"
          placeholder="请选择父级展览"
        >
          <el-option
            v-for="item in exhibitionList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <el-table v-loading="loading3" :data="tableData2" @selection-change="selectionChange">
      <el-table-column
      type="selection"
      width="55"
      >
    </el-table-column>
      <template v-for="(item, index) in tableColumn2">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :key="index"
          align="center"
        ></el-table-column>
      </template>
      <el-table-column label="展览简介" align="center">
        <template slot-scope="scope">
          <div v-html="scope.row.about">{{ scope.row.about }}</div>
        </template>
      </el-table-column>
      <el-table-column label="封面图" align="center">
        <template slot-scope="scope">
          <img
            :src="prefix + scope.row.pic"
            :style="{ width: '60px' }"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column label="画廊轮播图" align="center">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="show(scope.row.gallery)"
            >查看</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="360" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.hasLeaf"
            type="warning"
            size="mini"
            @click="showChilren(scope.row.id)"
            >查看子展览</el-button
          >
          <el-button type="info" size="mini" @click="download(scope.row)"
            >导出二维码</el-button
          >
          <el-button type="success" size="mini" @click="handel(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="del2(scope.row)"
            >删除</el-button
          >
          <!-- <el-button
			        			type="info"
			        			@click="download(scope.row)">导出二维码</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <Page
      show-total
      class="page"
      :total="total"
      :current.sync="current"
      :page-size="size"
      show-elevator
      @on-change="changePage"
    />
    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      title="查看画廊轮播图"
      :modal="false"
      :visible.sync="modal1"
      width="50%"
    >
      <img
        v-for="item,index in gallery"
        :key="index"
        :style="{ width: '100%' }"
        :src="prefix + item"
        alt=""
      />
    </el-dialog>
    <Modal
      title="展览操作"
      v-model="modal2"
      :closable="false"
      :mask-closable="false"
      width="50"
    >
      <!-- <el-dialog 
    		:append-to-body="true" 
    		:close-on-click-modal="false" 
    		title="展览操作" 
    		:modal="false" 
    		:visible.sync="modal2" 
    		width="50%"> -->
      <el-form
        :model="newData2"
        :rules="rules2"
        ref="ruleForm2"
        label-width="140px"
      >
        <el-form-item label="父级" prop="parentId">
          <el-select v-model="newData2.parentId" style="width: 100%">
            <template v-for="(item, index) in exhibitionList">
              <el-option
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="展览类型" prop="exhibitionTypeId">
          <el-select v-model="newData2.exhibitionTypeId" style="width: 100%">
            <template v-for="(item, index) in exhibitionTypeList">
              <el-option
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="展览权重" prop="weight">
          <el-input-number
            v-model="newData2.weight"
            style="width: 100%"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="展览名称" prop="name">
          <el-input v-model="newData2.name"></el-input>
        </el-form-item>
        <el-form-item label="展览简介" prop="about">
          <vue-tinymce
            v-if="modal2"
            :value="newData2.about"
            @catchData="catchData2"
          ></vue-tinymce>
        </el-form-item>
        <el-form-item label="展览封面图" prop="pic">
          <vue-uploadimg
            :key="ind"
            :imgUrl="imgurl1"
            :clear="clear"
            @uploadImg="uploadImg1"
          ></vue-uploadimg>
        </el-form-item>
        <el-form-item label="展览画廊轮播" prop="gallery">
          <vue-uploadimgmore
            :imgUrl="imgurl2"
            @uploadImg="uploadImg2"
          ></vue-uploadimgmore>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit2" :loading="loading4"
          >立即提交</el-button
        >
        <el-button type="info" @click="modal2 = false">关闭</el-button>
      </span>
      <!-- </el-dialog> -->
    </Modal>
  </div>
</template>

<script src="./exhibition.js"></script>
<style scoped>
.searchBox {
  display: flex;
}
.mainPage_top {
  widows: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.code {
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.code_pic {
  width: 2rem;
  height: 2rem;
  background: rgba(0, 0, 0, 0.1);
}
.code_input {
  width: 2rem;
  position: absolute;
  top: 2.6rem;
}
/deep/ .el-input-number--small {
  width: 576px;
}
.icon {
  cursor: pointer;
}
</style>